<template>
  <div class="test-font">
    <div>name：{{ name }}</div>
    <div>age：{{ age }}岁</div>
    <div>height：{{ height }}米</div>
    <div>weight：{{ weight }}公斤</div>
    <div>weight-2：{{ weight2 }}斤</div>
    <div>attr：{{ attr }}</div>
    <div>淦饭了没：{{ eat }}</div>
    <button class="test-button" @click="changeMsg">淦饭</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from "vue";
interface DataProps {
  name: string;
  age: number;
  height: number;
  weight: number;
  weight2: number;
  attr: string;
  eat: string;
  changeMsg: () => void;
}
export default defineComponent({
  setup() {
    const data: DataProps = reactive({
      name: "熊志强",
      age: 18,
      height: 1.85,
      weight: 135,
      weight2: computed(() => {
        return data.weight / 2;
      }),
      attr: "帅一批",
      eat: "没有",

      changeMsg: () => {
        data.eat = "淦了";
      },
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>
